<template>
  <div class="link-redirect">
    <div v-if="loading" class="loading">跳转中...</div>
    <div v-else-if="error" class="error">跳转失败: {{ error }}</div>
  </div>
</template>

<script>
export default {
  name: 'LinkRedirect',
  props: {
    category: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      loading: true,
      error: null
    }
  },
  mounted() {
    this.handleRedirect()
  },
  methods: {
    handleRedirect() {
      try {
        // 假设category.linkUrl存储了跳转URL
        const url = this.category.link || this.category.outLink
        
        if (!url) {
          throw new Error('未配置跳转链接')
        }

        // 判断是内部链接还是外部链接
        if (url.startsWith('http')) {
          // 外部链接，新窗口打开
          window.open(url, '_blank')
        } else {
          // 内部链接，使用路由跳转
          this.$router.push(url)
        }
      } catch (err) {
        this.error = err.message
        console.error('跳转失败:', err)
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

<style scoped>
.link-redirect {
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.loading, .error {
  font-size: 18px;
  color: #666;
}
.error {
  color: #f56c6c;
}
</style>